         // 第一次渲染页面 如果img没有懒加载，会开辟HTTP线程，会去服务器获取资源。不仅占用了有限的HTTp线程数量，而且获取图片资源较慢，会让其他资源获取更慢！
        // 而且第一次渲染页面，连图片一起绘制，这样绘制页面的速度也会变慢！
        //并且移动端中，把没有出现在视口的图片也做加载，会浪费很多用户的流量
        const picBox = document.querySelector('.pic-box'),
        img = picBox.querySelector('img');
        console.log(picBox.getBoundingClientRect());
            //1.计算出现在可视窗口的条件
        const computed = function computed(){
            
            // if (picBox.isLoad)  return; //已经处理过就不在执行
           let {top,bottom} = picBox.getBoundingClientRect(),
           winH = document.documentElement.clientHeight;
           if (top >= 0 && top <= winH && bottom >= 0 && bottom <= winH) {// 完全出现
            let tempImg = new Image(), //等同于createElement（'img'）
                address = img.getAttribute('data-image'); //真实地址
                tempImg.src = address;
                tempImg.onload = () =>{
                    img.src = tempImg.src;
                    img.style.opacity = 1;
                }
        //    !!! 一般不会直接操作页面中的img
        //    img.src=  img.getAttribute('data-image')
        //    img.onload = () => {
        //        img.style.opacity = 1;
        //    }
        };

        // 防止重复操作  优化
        picBox.isLoad = true;
    };
            //2.第一次渲染玩页面 或者滚动条中随时计算
            //3.默认的触发频率太频繁了  造成性能损耗；
            //降低触发频率  =》 函数节流
          window.onload = computed;  //检测
          window.onscroll = utils.throttle(computed,500);
          
   